<template>
  <div class="content">
    <el-row class="bgW">
      <el-col :span="22">
        <el-form class="search" :inline="true" size="mini" :model="search">
          <el-form-item label="姓名" v-if="!clienId">
            <el-input
              v-model="search.customer_name"
              maxlength="30"
              class="w200"
              placeholder="请输入姓名"
              clearable
            />
          </el-form-item>
          <el-form-item label="咨询员工">
            <el-input
              v-model="search.work_name"
              maxlength="30"
              class="w200"
              placeholder="请输入员工姓名"
              clearable
            />
          </el-form-item>
          <el-form-item label="咨询日期">
            <el-date-picker
              v-model="search.start"
              type="date"
              class="w130"
              placeholder="开始日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
            <el-date-picker
              v-model="search.end"
              type="date"
              class="w130"
              placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList('search')">搜索</el-button>
      </el-col>
    </el-row>
    <div class="accountCon">
      <div class="btnBox">
        <el-button
          type="primary"
          class="mb10"
          size="mini"
          :disabled="list.length == 0"
          @click="hint('导出数据','')"
        >导出数据</el-button>
        <el-button
          type="primary"
          class="mb10"
          size="mini"
          @click="goVisitClient"
          v-if="clienId"
        >添加咨询</el-button>
      </div>
       <!--全部客访记录列表-->
      <el-row>
        <el-col :span="24">
          <el-table
            :data="list"
            size="small"
            border
            :cell-style="$style.cellStyle"
            :header-cell-style="$style.rowClass"
            @selection-change="handleSelectionChange"
          >
            <ElTableColumn label="客户名称" prop="customer_name" />
            <ElTableColumn label="手机号" prop="telephone" />
            <ElTableColumn label="门店名称" prop="shop_name" />
            <ElTableColumn label="员工名称" prop="consult_name" />
            <ElTableColumn label="咨询情况" prop="consult_content" />
            <ElTableColumn label="潜在需求" prop="latent_demand" />
            <ElTableColumn label="咨询时间" prop="create_time" />
          </el-table>
          <pagination
            class="page tc mt10"
            :total="page.total"
            :page.sync="page.page"
            :limit.sync="page.pagesize"
            @pagination="getList"
          />
        </el-col>
      </el-row>
    </div>

    <el-dialog title="添加咨询记录" :visible.sync="visitClient" :close-on-click-modal="false">
      <el-form
        ref="detail"
        label-position="right"
        label-width="200px"
        :rules="rules"
        :model="detail"
        class="frame"
      >
        <el-form-item label="客户姓名:">
          <el-input v-model="consignee" class="w300" readonly></el-input>
        </el-form-item>
        <el-form-item label="咨询情况" prop="consult_content">
          <el-input
            v-model="detail.consult_content"
            class="w300"
            placeholder="请填写咨询情况"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="潜在需求" prop="latent_demand">
          <el-input
            v-model="detail.latent_demand"
            class="w300"
            placeholder="请填写潜在需求"
            type="textarea"
          />
        </el-form-item>

        <el-form-item label="咨询时间:" prop="consult_time">
          <el-date-picker
              v-model="detail.consult_time"
              type="date"
              class="w300"
              placeholder="请选择咨询时间"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
        </el-form-item>

        <div class="footerBtn">
          <el-button type="primary" size="mini" class="mainBtn" @click="submitForm('detail')">完成，提交</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import pagination from "@/components/Pagination";
import {
  vistExport,
  returnConsult,
  addConsult

} from "@/api/client";
class Search {
  customer_name = "";
  work_name="";
  start = "";
  end = "";
}
class Detail {
  customer_id = "";
  consult_content = "";
  consult_time="";
  latent_demand=""
}
class Rules {
  consult_content = [
    { required: true, message: "请填写咨询情况", trigger: "blur" }
  ];

  consult_time = [
    { required: true, message: "请选择咨询时间", trigger: "blur" }
  ];
}
class Page {
  total = 0;
  page = 1;
  pagesize = 10;
}
export default {
  name: "ClientList",
  components: {
    pagination
  },
  props: {
    clienId: {
      type: String,
      default: ""
    },
    consignee: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      page: new Page(),
      search: new Search(),
      detail: new Detail(),
      rules: new Rules(),
      list: [],
      idList: "",
      visitClient: false,
      notHave: false,
      mixTime:{
        disabledDate(time){
          return time.getTime()<Date.now()-8.64e7;
        }
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  mounted() {

    this.detail.customer_id = this.clienId ? this.clienId : "";
    this.getList();
  },
  methods: {
    go_vist(item){
      this.visitClient = true;
      console.log(item);
      this.detail.vistId = item.id;
    },
    goVisitClient(){
      this.detail = new Detail();
      this.visitClient = true;
      this.detail.customer_id = this.clienId;
    },
    getList(option) {
      if (option === "search") this.page = new Page();
      returnConsult({
        ...this.page,
        ...this.search,
        customer_id: this.clienId,
        export:0
      }).then(res => {
        this.list = res.data.data;
        if (!this.list.length) {
          this.notHave = true;
        }
        this.page.total = res.data.total;
      });
    },
    // 提交
    submitForm(formName) {
      // this.checking();
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.hint("添加该条咨询记录", "add");
        } else {
          return false;
        }
      });
    },
    // 提示
    hint(text, type) {
      this.$confirm(`${text},是否确定？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (type == "add") {
            this.confirm(type);
          } else {
            this.getExport();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 导出
    getExport() {
       returnConsult({
        ...this.search,
        customer_id: this.clienId,
        export:1
      }).then(res => {
         window.open(res.data.url);
      });
    },
    // 确认提交
    confirm(type) {
    this.detail.consult_id = this.userInfo.id
      addConsult({ ...this.detail }).then(res => {
        this.$message({
          type: "success",
          message: res.msg
        });
        this.visitClient = false;
        this.getList();
      });
    },
    // 改变表格选中状态
    handleSelectionChange(val) {
      this.idList = val.map(i => {
        return i.id;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.mainColor {
  color: #2dc0a3;
}
.content {
  height: calc(100% - 56px);
  overflow-y: auto;
}
.bgW {
  background: #fff;
  border-radius: 3px;
  padding: 10px;
}

.el-form-item {
  margin: 0px 20px 3px 0;
}
.accountCon {
  background: #fff;
  padding: 0px 10px 30px;
  .btnBox {
    margin-bottom: 20px;
    // display: flex;
    // justify-content: space-between;
  }
  .entryBox {
    height: 600px;
    overflow-y: scroll;
    .entryRow1 {
      display: flex;
      .item-circle {
        width:30px;
        height: 30px;
        z-index: 2;
      }
      .clientName {
        line-height: 30px;
        font-size: 16px;
        font-weight: bold;
      }
    }
    .entryRow2 {
      line-height: 12px;
      color: #999;
      margin: 10px 0 0 20px;
      display: flex;
      font-size: 14px;
    }
    .entryRow3 {
      height:40px;
      color: #444;
      margin: 10px 0 20px;
      font-size: 15px;
    }
  }
  ::-webkit-scrollbar {
    display: none;
  }
}
.frame {
  .el-form-item {
    margin: 0px 20px 26px 0;
  }
}
.footerBtn {
  text-align: right;
}
.go_vist{
  font-weight:bold;
  color: red;
  cursor: pointer;
}
</style>
